<template>
    <div class="app-container calendar-list-container" v-loading="loading" element-loading-text="正在导出数据">
    <!-- filter 条件查询 -->
    <div class="filter-container">
      <el-input
            clearable
            v-model="listQuery.technologyNo"
            :style="searchInputStyle"
            class="filter-item"
            placeholder="请输入内部编码"
      ></el-input>
      <el-input
            clearable
            v-model="listQuery.technologyNoHw"
            style="margin-right: 15px"
            :style="{ width: inputWid(listQuery.performanceDesc) }"
            class="filter-item"
            placeholder="请输入华为编码"
      ></el-input>
      <el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="getData">搜索</el-button>
      <el-button class="filter-item" icon="el-icon-plus" size="mini" type="success" @click="handleAdd">新增</el-button>
      <el-button class="filter-item" size="mini" type="success" :loading="btnLoading" @click="refresh">刷新</el-button>
    </div>

    <!-- table 表格 -->
    <el-table  :data="tableInfo" v-loading="loadingList" element-loading-text="给我一首歌的时间" stripe border fit highlight-current-row style="width: 100%">
      <el-table-column  label="序号" type="index" align="center" width="80px"/>
      <el-table-column label="内部编码"  prop="technologyNo" align="center"/>
      <el-table-column label="华为编码"  prop="technologyNoHw" align="center" width="160px"/>
      <el-table-column label="产品分类"  prop="productClassification" align="center"/>
      <el-table-column  label="产品描述" prop='productDescription' align="center" width="100px"/>
      <el-table-column label="结构件编码"  prop="structuralMemberTechnology" align="center"/>
      <el-table-column label="装配工时包"  prop="assemblyTimeBag" align="center"/>
      <el-table-column label="测试工时包"  prop="testTimeBag" align="center"/>
      <el-table-column label="包装工时包"  prop="packingTimeBag" align="center"/>
      <el-table-column label="粘贴工时包"  prop="pasteTimeBag" align="center"/>
      <el-table-column label="绑扎工时包"  prop="bindTimeBag" align="center"/>
      <el-table-column label="检查工时包"  prop="checkTimeBag" align="center"/>
      <el-table-column label="工时总包"  prop="totalWorkingHoursPackage" align="center"/>
      <el-table-column label="装配工时"  prop="assemblyTime" align="center"/>
      <el-table-column label="测试工时"  prop="testTime" align="center"/>
      <el-table-column label="包装工时"  prop="packingTime" align="center"/>
      <el-table-column label="粘贴工时"  prop="pasteTime" align="center"/>
      <el-table-column label="绑扎工时"  prop="bindTime" align="center"/>
      <el-table-column label="检查工时"  prop="checkTime" align="center"/>
      <el-table-column label="实际总工时"  prop="actualTotalWorkingHours" align="center"/>
      <!-- 对员工绩效评分数据进行编辑与删除操作 -->
      <el-table-column  label="操作" fixed="right" align="center" width="160" v-if="userInfo.roleId != 37">
        <template slot-scope="scope" >
              <el-button size="mini" type="primary" @click="handleEdit(scope.row)">修改</el-button>
              <el-button size="mini" type="danger" @click="handleDel(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
   
   <!-- pagination 分页 -->
    <div class="pagination-container">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="listQuery.page"
        :page-sizes="[5,10, 20, 30, 40, 100, 300, 500]"
        :page-size="listQuery.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>

    <el-divider></el-divider>

      <div>
          <el-upload
        class="upload-demo"
        ref="upload"
        :action="action"
        :on-success="handleSuccess"
        :file-list="fileList"
        :headers="httpHeader"
        :auto-upload="false">
          <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
          <div style="display: inline;">
            <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
            <!-- <div slot="tip" class="el-upload__tip">批量添加上传</div> -->
          </div>
        </el-upload>
      </div>

    <el-button style="margin-right: 10px;margin-top: 10px;" type="success" size="small" @click="hExportExcel">导出数据Excel</el-button>

    <el-dialog :title="title" :visible.sync="dialogFormVisible" width="60%" @close="close('form')">
    <el-form ref="form" :model="modifyform" :rules="rules">
        <div style="display: flex;">
            <el-form-item label="内部编码" prop="technologyNo" :label-width="formLabelWidth">
              <!-- <el-input clearable v-model="modifyform.technologyNo" style="width:236px" /> -->
              <el-select @change="changeNB" v-model="modifyform.technologyNo" style="width:236px">
                <el-option :value="item.technologyNo" :label="item.technologyNo" v-for="(item,index) in this.NBList" :key="index">{{ item.technologyNo }}</el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="华为编码" prop="technologyNoHw" :label-width="formLabelWidth">
              <el-input @input="changeHW" v-model="modifyform.technologyNoHw" style="width:236px"/>
              <!-- <div style="border: 1px solid #000;"> -->
              <!-- <div>
                <div v-for="(item,index) in HWlist" :key="index" @click="HWclick(item)">
                  <a>{{ item.specification }}</a>
                </div>
              </div> -->
            </el-form-item>
            <el-form-item label="产品分类" prop="productClassification" :label-width="formLabelWidth">
              <el-select v-model="modifyform.productClassification" style="width:350px">
                <el-option :value="item" :label="item" v-for="(item,index) in this.typeList" :key="index"/>
              </el-select>
            </el-form-item>
        </div>
        <div style="display: flex;">
            <el-form-item label="产品描述" prop="productDescription" :label-width="formLabelWidth">
              <el-input disabled type="textarea" autosize clearable v-model="modifyform.productDescription" style="width:640px" />
            </el-form-item>
            <el-form-item label="结构件编码" prop="structuralMemberTechnology" :label-width="formLabelWidth">
              <el-input
                clearable
                v-model="modifyform.structuralMemberTechnology"
                class="filter-item"
                style="width:277px"></el-input>
            </el-form-item>
        </div>
        <div style="display: flex;">
            <el-form-item label="装配工时包" prop="assemblyTimeBag" label-width="92px">
              <el-input clearable v-model="modifyform.assemblyTimeBag" style="width:92px" />
            </el-form-item>
            <el-form-item label="测试工时包" prop="testTimeBag" label-width="92px">
              <el-input clearable v-model="modifyform.testTimeBag" style="width:92px" />
            </el-form-item>
            <el-form-item label="包装工时包" prop="packingTimeBag" label-width="92px">
              <el-input clearable v-model="modifyform.packingTimeBag" style="width:92px" />
            </el-form-item>
            <el-form-item label="粘贴工时包" prop="pasteTimeBag" label-width="92px">
              <el-input clearable v-model="modifyform.pasteTimeBag" style="width:92px" />
            </el-form-item>
            <el-form-item label="绑扎工时包" prop="bindTimeBag" label-width="92px">
              <el-input clearable v-model="modifyform.bindTimeBag" style="width:92px" />
            </el-form-item>
            <el-form-item label="检查工时包" prop="checkTimeBag" label-width="92px">
              <el-input clearable v-model="modifyform.checkTimeBag" style="width:92px" />
            </el-form-item>
        </div>
        <div>提示：时间单位请按秒（S）维护</div>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="modify('form')">确 定</el-button>
    </div>
    </el-dialog>

  </div>
</template>

<script>
import { turnkeyProject,projectdel,projectupd,projectins,AndtechnologyNoLike,turnkeyProjectrefresh } from '../../api/processRoute'
import {uploadURL} from '@/utils/baseURL'
export default {
    name: 'emsLumpsum',
    data () {
        return {
          btnLoading: false,
          // NBList:[],
          title:'修改工时总包',
          NBList: [],
          fileList: [],
          httpHeader: {
          'Authorization': ''
      },
          action: uploadURL + `/process-job-class-time-turnkey-project/processExcelMachine`,
            listQuery: {
              page: 1,
              limit: 10
            },
            modifyform: {
              technologyNo:'',
              technologyNoHw:'',
              productClassification:'',
              productDescription:'',
              structuralMemberTechnology:'',
              assemblyTimeBag:'',
              testTimeBag:'',
              packingTimeBag:'',
              pasteTimeBag:'',
              bindTimeBag:'',
              checkTimeBag:'',
            },
            rules: {
              technologyNo: [
              { required: true, message: '请输入内部编码', trigger: 'blur' }
            ],
            technologyNoHw: [
              { required: true, message: '请输入华为编码', trigger: 'blur' }
            ],
            productClassification: [
              { required: true, message: '请输入产品分类', trigger: 'blur' }
            ],
            productDescription: [
              { required: true, message: '请输入产品描述', trigger: 'blur' }
            ],
            structuralMemberTechnology: [
              { required: true, message: '请输入结构件编码', trigger: 'blur' }
            ],
            assemblyTimeBag: [
              { required: true, message: '请输入装配工时包', trigger: 'blur' }
            ],
            testTimeBag: [
              { required: true, message: '请输入测试工时包', trigger: 'blur' }
            ],
            packingTimeBag: [
              { required: true, message: '请输入包装工时包', trigger: 'blur' }
            ],
            pasteTimeBag: [
              { required: true, message: '请输入粘贴工时包', trigger: 'blur' }
            ],
            bindTimeBag: [
              { required: true, message: '请输入绑扎工时包', trigger: 'blur' }
            ],
            checkTimeBag: [
              { required: true, message: '请输入检查工时包', trigger: 'blur' }
            ],
          },
            centerList: [],
            formLabelWidth: '92px',
            searchInputStyle: 'width: 150px;margin-right:15px;',
            total: 0,                                      //数据的总数
            tableInfo: [],
            typeList:['站点能源-室内柜','站点能源-户外柜','站点能源-插框','站点能源-组件','充电桩-充电终端','充电桩-充电主机'],
            dialogFormVisible: false,
            loadingList: false,
            loading: false,
            userInfo: this.$store.state.user.userInfo,
        }
    },
    computed: {
      inputWid() {
        return function (value) {
            if(!value || (value.length <= 10)){
              return '170px'
            } else {
              return (170 + (String(value).length-10)*10) + 'px'
            }
        }
      }
    },
    methods: {
      // 点击刷新
      async refresh(){
        this.btnLoading = true
        setTimeout(() => {
          this.btnLoading = false
        }, 120000);
        let query = {
          technologyNo: this.listQuery.technologyNo,
          technologyNoHw: this.listQuery.technologyNoHw,
        }
        if(!query.technologyNo){ delete query.technologyNo }
        if(!query.technologyNoHw){ delete query.technologyNoHw }
        const res = await turnkeyProjectrefresh(query)
        if(res.code == '500') return
        if(res.code != '1') return this.$message.error(res.msg)
        if(res.code == '1') this.$message.success(res.msg)
        this.btnLoading = false
      },
      close(form){
        this.$refs[form].resetFields()
        this.NBList= []
        this.modifyform = {
              technologyNo:'',
              technologyNoHw:'',
              productClassification:'',
              productDescription:'',
              structuralMemberTechnology:'',
              assemblyTimeBag:'',
              testTimeBag:'',
              packingTimeBag:'',
              pasteTimeBag:'',
              bindTimeBag:'',
              checkTimeBag:'',
            }
      },
      changeNB(e){
        this.NBList.forEach(item =>{
          if(item.technologyNo == e){
            // this.modifyform.technologyNo = item.technologyNo
            this.modifyform.productDescription = item.technologyName
            this.modifyform.technologyNoHw = item.specification
          }
        })
      },
      // 获取华为改变
      async changeHW(e){
        let query = {
          specification: e,
        }
        const res = await AndtechnologyNoLike(query)
        console.log(res)
        if(res.data.length){
          this.NBList = res.data
          this.modifyform.technologyNo = this.NBList[0].technologyNo
          this.modifyform.productDescription = this.NBList[0].technologyName
          // this.modifyform.technologyNoHw = this.NBList[0].specification
        } else{
          this.NBList = []
          this.modifyform.technologyNo = ''
          this.modifyform.productDescription = ''
          // this.modifyform.technologyNoHw = ''
        }
      },
        getData(){
          this.listQuery.page = 1
          this.listQuery.limit = 10
          this.handleFilter()
        },
        async handleFilter() {
            this.loadingList = true
            let query = Object.assign({},this.listQuery)
            let {data} = await turnkeyProject(query)
            this.total = data.count
            this.tableInfo = data.list
            this.loadingList = false
        },
        handleAdd(){
          this.title = '新增工时总包'
          this.dialogFormVisible = true
        },
        handleEdit(item) {
            this.title = '修改工时总包'
            this.modifyform = Object.assign({},item)
            this.dialogFormVisible = true
        },
        // 删除
        async handleDel(item){
          const data = await projectdel({id:item.id})
          console.log(data)
          if(data.code == '1'){
                this.$message({
                  message: '删除成功',
                  type: 'success'
              })
              this.handleFilter()
            } else {
              this.$message({
                  message: '删除失败',
                  type: 'warning'
              })
          }
        },
        // 将弹框修改后的绩效评分信息传入后台，并且消息提示是否修改成功
        async modify(form) {
            this.$refs[form].validate(async (valid) => {
            if (valid) {
              this.dialogFormVisible = false
              let query = Object.assign({},this.modifyform)
              let data
              if(this.title == '新增工时总包'){
                data = await projectins(query)
              } else {
                data = await projectupd(query)
              }
              if(data.code == '1'){
                  this.$message({
                    message: data.msg,
                    type: 'success'
                })
                this.handleFilter()
              } else {
                this.$message({
                    message: data.msg,
                    type: 'warning'
                })
            }
            } else {
              return false
            }
          })
        },
        // table表单下方的页码组件改变每页显示的数据条数
        handleSizeChange(val) {
          this.listQuery.limit = val
          this.handleFilter()
        },
        // table表单下方的页码组件改变页面
        handleCurrentChange(val) {
          this.listQuery.page = val
          this.handleFilter()
        },
        transformDat(res) {
          const mapInfo = {
            technologyNo: '内部编码',
            technologyNoHw: '华为编码',
            productClassification: '产品分类',
            productDescription: '产品描述',
            structuralMemberTechnology: '结构件编码',
            assemblyTimeBag: '装配工时包',
            testTimeBag: '测试工时包',
            packingTimeBag: '包装工时包',
            pasteTimeBag: '粘贴工时包',
            bindTimeBag: '绑扎工时包',
            checkTimeBag: '检查工时包',
            totalWorkingHoursPackage: '工时总包',
            assemblyTime: '装配工时',
            testTime: '测试工时',
            packingTime: '包装工时',
            pasteTime: '粘贴工时',
            bindTime: '绑扎工时',
            checkTime: '检查工时',
            actualTotalWorkingHours: '实际总工时',
          }
          // 对data进行格式化
          // 取出所有的属性名
          const props = Object.keys(res[0]) // ['id','']
          console.log(props)
          // 将属性名从英文转为中文
          const header = props.map(zhkey => mapInfo[zhkey])
          // const data=[['xxxx','总裁办'，'13800000']]
          const data = res.map(obj => Object.values(obj))
          return { header, data }
        },
        // 导出excel
        async hExportExcel() {
          this.loading = true
          let query = Object.assign({},this.listQuery)
          query.page = 1
          query.limit = 10000

          let res = await turnkeyProject(query)
          console.log(res)
          const { header, data } = this.transformDat(this.setSort(res.data.list))
            import('@/vendor/Export2Excel').then(excel => {
            // excel表示导入的模块对象
            console.log(excel)
            excel.export_json_to_excel({
            header, // 表头 必填
            data, // 具体数据 必填
            filename: '工时总包', // 文件名称
            autoWidth: true, // 宽度是否自适应
            bookType: 'xlsx' // 生成的文件类型
            })
          })
          this.loading = false
        },
        // 排序函数
        setSort(arr){
          let newArr = JSON.parse(JSON.stringify(arr))
          let arr1 = []
          newArr.forEach((item,index)=>{
            let obj = {
              technologyNo: item.technologyNo,
              technologyNoHw: item.technologyNoHw,
              productClassification: item.productClassification,
              productDescription: item.productDescription,
              structuralMemberTechnology: item.structuralMemberTechnology,
              assemblyTimeBag: item.assemblyTimeBag,
              testTimeBag: item.testTimeBag,
              packingTimeBag: item.packingTimeBag,
              pasteTimeBag: item.pasteTimeBag,
              bindTimeBag: item.bindTimeBag,
              checkTimeBag: item.checkTimeBag,
              totalWorkingHoursPackage: item.totalWorkingHoursPackage,
              assemblyTime: item.assemblyTime,
              testTime: item.testTime,
              packingTime: item.packingTime,
              pasteTime: item.pasteTime,
              bindTime: item.bindTime,
              checkTime: item.checkTime,
              actualTotalWorkingHours: item.actualTotalWorkingHours,
          }
          arr1.push(obj)
          })
          return arr1
        },
        submitUpload() {
        //  this.httpHeader.Authorization = this.dealCookie(document.cookie)
         this.httpHeader.Authorization = this.$store.state.user.token,
         this.$refs.upload.submit()
         },
         dealCookie(value) {
             const cookieArr = value.split('=')
             console.log(cookieArr);
             // cookieArr[2]测试服使用
             return cookieArr[1]
         },
         // 上传成功
        handleSuccess(response){
          if(response.code == 1){
            this.$message.success(response.msg)
          } else {
            this.$message.error(response.msg)
          }
          this.handleFilter()
        },
        },
    // 进入页面获取table信息
    mounted() {
        this.handleFilter()
    }
}
</script>

<style>

</style>